/*
bind和componentUpdated钩子函数：
这两个函数中执行了相同的逻辑，即遍历el元素下的所有pre code元素，并对它们应用highlightBlock方法进行高亮处理。
如果binding.value存在，则将其内容设置为target.textContent。
最后，调用hljs.highlightBlock(target)方法对代码块进行高亮。
*/
import hljs from 'highlight.js'  // 引入highlight.js库，这是一个用于代码高亮的JavaScript库。
import 'highlight.js/styles/atom-one-light.css' // 引入highlight.js的样式文件，这里使用的是atom-one-light样式。

export default {
  install (Vue, options) {
    Vue.directive('highlight', { // 注册一个名为highlight的自定义指令
      deep: true, // 使指令可以递归地应用于其子元素
      bind: function (el, binding) { // 当指令第一次绑定到元素上时调用
        Array.from(el.querySelectorAll('pre code')).forEach((target) => {
          if (binding.value) {
            target.textContent = binding.value
          }
          hljs.highlightBlock(target)
        })
      },
      componentUpdated: function (el, binding) {
        Array.from(el.querySelectorAll('pre code')).forEach((target) => {
          if (binding.value) {
            target.textContent = binding.value
          }
          hljs.highlightBlock(target)
        })
      }
    })
  }
}
